<template>
    <div id="ServiceDetail">
        <div class="banner container-fuild text-center">相关服务</div>
        <div class="container">
            <div class="row">
                <div id="myScrollspy" class="col-md-3 col-sm-12 col-xs-12">
                    <ul id="myNav" class="center-block nav nav-stacked nav-tabs">
                        <p>特色服务</p>
                        <li
                            v-for="(item, index) in serviceNavList"
                            :key="index"
                            :class="item.id == id ? 'active' : ''"
                        >
                            <a href="javascript:;" @click.stop="toSection(item.id)">{{
                                item.title
                            }}</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-9 col-sm-12 col-xs-12 content wow zoomIn">
                    <div
                        v-for="(item, index) in serviceContentList"
                        :key="index"
                        class="content-block"
                    >
                        <h2 :id="item.id">
                            {{ item.title }}
                            <small>/ {{ item.eng_title }}</small>
                        </h2>
                        <div v-html="item.content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="serviceDetail">
    import { onMounted, ref } from 'vue';
    import { useRoute } from 'vue-router';
    import WOW from 'wow.js';
    const props = defineProps({
        id: {
            type: String,
            required: true,
            // default: 'section-1222'
        },
    });
    const id = ref('section-1');
    const serviceNavList = [
        {
            id: 'section-1',
            title: '散热半导体芯片',
        },
        {
            id: 'section-2',
            title: 'TEC晶振',
        },
        {
            id: 'section-3',
            title: '液冷解决方案',
        },
        {
            id: 'section-4',
            title: '温控应用场景',
        },
    ];
    const serviceContentList = [
        {
            id: 'section-1',
            title: '散热半导体芯片',
            eng_title: 'Heat Dissipation Semiconductor Chip',
            content:
                '<h3>高性能热电材料</h3><p>热电材料可以直接将热能转化为电能或直接将电能转换热能，能量转换是通过内部载流子运动实现的，因而其组成的热电器件无噪音和污染物产生，还具有体积小易于集成，无移动部件，可靠性高等优点。这些特性使热电技术在废热回收和热电制冷等应用中具有独特的优势。</p><div style="display: flex;flex-wrap: wrap;"><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-1.png"/><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-2.png"/><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-3.png"/></div><h3>超微半导体制冷芯片</h3><p>半导体制冷芯片是由许多微小而有效的热泵组成的半导体器件。通过施加一个低压直流电源，热量将从半导体制冷芯片的一面转移到另一面，从而产生一面变热另一面变冷的现象。超微半导体制冷芯片使用高性能碲化铋材料与先进封装技术，尺寸可小于2mm*2mm*1mm，温度精准度可控制在±0.01℃，制冷功率密度达35W/cm²，满足航空航天领域的性能和可靠性要求。</p><div style="display: flex;flex-wrap: wrap;"><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-4.png"/><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-5.png"/><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-6.png"/><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-7.png"/></div>',
        },
        {
            id: 'section-2',
            title: 'TEC晶振',
            eng_title: 'TEC Crystal Oscillator',
            content:
                '<h3>TEC晶振</h3><p>利用研发的MICRO TEC对金属壳体的内部晶振控温，在-40℃~70℃环温下将内部温度恒温在45±0.5℃，保证晶振频率稳定输出，在常温下降低24H平均功耗，温漂高于普通晶振两个数量级，可以达到0.01ppm。</p><div style="display: flex;flex-wrap: wrap;"><img style="width: 100%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-32_1.png"/><img style="width: 100%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-11_1.png"/></div><h3>晶振应用</h3><div style="display: flex;flex-wrap: wrap;"><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-12_1.png"/><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-13_1.png"/><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-14_1.png"/><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-15_1.png"/></div><h3>高性能导热板</h3><p>采用含有自研导冷液的管道式高性能导热板设计，导冷液气液相变焓值高达550J/g·K，导热效率较原设计提升250倍，可将局部热量快速传导至外壳散热，显著降低发热器件连续工作时局部温度过高，保证器件始终在安全温度内，确保通讯设备可长时间连续发射。可用于通讯，雷达，通讯基站等各类设备。</p><div style="display: flex;flex-wrap: wrap;"><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-16_1.png"/><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-17_1.png"/></div>',
        },
        {
            id: 'section-3',
            title: '液冷解决方案',
            eng_title: 'Liquid Cooling Solution',
            content:
                '<h3>高效冷却液</h3><p>高性价比冷却液，具备高比热容、高导热、温度可控范围广、安全无腐蚀性、与大部分材质兼容性良好，可以和电子元器件直接接触，对硬件有一定的保护作用。</p><div style="display: flex;flex-wrap: wrap;"><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-18_1.png"/><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-19_1.png"/><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-20_1.png"/><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-21_1.png"/><img style="width: 30%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-22_1.png"/><img style="width: 100%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-23_1.png"/></div><h3>冷板式液冷</h3><p>冷板液冷机柜主要由机柜、Manifold管路、配电系统、以及内部设备构成；作为液冷设备的载体，设备之间用液冷专用连接器和管道进行连接，用来保证连接可靠及散热效果。</p><div style="display: flex;flex-wrap: wrap;"><img style="width: 100%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-24_1.png"/><img style="width: 100%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-26_1.png"/><img style="width: 100%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-25_1.png"/></div><h3>浸没式液冷</h3><p>浸没液冷技术将IT设备完全浸没在绝缘无腐蚀的液体中，液体介质与功耗器件直接接触换热，通过液体的循环流动带走热量。液冷系统对比传统风冷系统，具有高效换热、冷却能耗低等优势。</p><div style="display: flex;flex-wrap: wrap;"><img style="width: 100%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-28_1.png"/><img style="width: 100%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-27_1.png"/><img style="width: 100%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-29_1.png"/></div><h3>模块化液冷</h3><p>高度集成了原有数据中心的供电，散热及安全管理系统等，模块化设计实现快速部署和灵魂扩展。</p><div style="display: flex;flex-wrap: wrap;"><img style="width: 100%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-30_1.png"/></div>',
        },
        {
            id: 'section-4',
            title: '温控应用场景',
            eng_title: 'Temperature Control Application Scenarios',
            content:
                '<h3>温控应用场景</h3><p>温控主要应用的场景有军事领域、通讯基站、航天、卫星、雷达、数据中心、电力行业、高效科研机构等。</p><div style="display: flex;flex-wrap: wrap;"><img style="width: 100%;height: auto;margin-right: 20px;margin-bottom: 20px;" src="/images/service1-31_1.png"/></div>',
        },
    ];
    function toSection(_id) {
        id.value = _id;
        const top = document.getElementById(id.value).offsetTop;
        $(window).scrollTop(top + 300);
        $('#myNav').affix({
            offset: {
                top: 300,
            },
        });
    }
    const route = useRoute();
    onMounted(() => {
        console.log('route：', route, route.params, route.query);
        console.log('history.state：', history.state);
        id.value = history.state.id;
        console.log(id.value, 'pp');
        const top = document.getElementById(id.value).offsetTop;
        $(window).scrollTop(top + 300);
        $('#myNav').affix({
            offset: {
                top: 300,
            },
        });
        const wow = new WOW();
        wow.init();
    });
</script>

<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url('../assets/img/banner_2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
ul.nav-tabs {
  width: 200px;
  margin-top: 40px;
  border-radius: 4px;
  background: #fff;
  z-index: 99999;
  border: 1px solid #474747;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
ul.nav-tabs li {
  text-align: center;
  margin: 0;
  border-top: 1px solid #474747;
}
ul.nav-tabs p {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background: #474747;
  margin: 0;
  padding: 10px 0;
}
ul.nav-tabs li:first-child {
  border-top: none;
}
ul.nav-tabs li a {
  margin: 0;
  padding: 8px 16px;
  border-radius: 0;
}
ul.nav-tabs li.active a,
ul.nav-tabs li.active a:hover {
  color: #fff;
  background: #474747;
  border: 1px solid #474747;
}
ul.nav-tabs li:first-child a {
  border-radius: 4px 4px 0 0;
}
ul.nav-tabs li:last-child a {
  border-radius: 0 0 4px 4px;
}
ul.nav-tabs.affix {
  top: 30px;
}
.content-block {
  margin: 50px 0;
}
.content-block > h2 {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
</style>
